<template>
	<view>
		<z-paging ref="paging" autowire-list-name="dataList" autowire-query-name="getList">
			<view class="content">
				<!-- <u-navbar back-text="" slot="center" :autoBack="true" safeAreaInsetTop placeholder>
					<view slot="center" class="leftText">搜索好活信息</view>
				</u-navbar> -->
				<view class="center">
					<view class="search">
						<view class="searchTop">
							<!-- <view class="addr" @click="addressisShow = true; hideKeyboard()"> -->
							<view v-if="needCity==true" class="addr" @click="gotoCity()">
								<text>{{address == ''? (addresspro == ''? '全国' : addresspro) : address }}</text>
								<u-icon name="arrow-down" color="#000" size="12"></u-icon>
							</view>
							<view class="search" style="overflow: hidden;" >
								<u-icon name="search" color="#000" size="24"></u-icon>
								<u--input v-model="seachform.keyWords" border="none" placeholder="搜索你要找的好活"
									color="#A1A1A1" placeholderStyle="color:rgba(255,255,255,.5)" @change='bgsearch'>
									
									</u--input>
									<view class="" style="width: 100rpx; height: 60rpx; margin-top: -5rpx;">
										<u-button type="primary" text="搜索" @click='searchbtn' throttleTime="500" ></u-button>
									</view>
							</view>
							<view class="right" @click="show = true; hideKeyboard()">筛选</view>
						</view>
						<view class="topmenu">
							<view v-for="(item,index) in bannerList" :key="index" @click="itemClick(item)"
								class="menus">
								<view>
									<image mode="aspectFill" :src="item.iconUrl">
									</image>
								</view>
								<text style="font-size: 15px;font-weight: bold;color: #0f0f0f;">{{item.name}}</text>
							</view>
						</view>
						<block v-if="dataList && dataList.length>0 || dataList.length>0">
							<!-- <z-paging ref="paging" v-model="dataList" @query="getList"></z-paging> -->
							<scroll-view scroll-y="true" class="scroll-Y" :show-scrollbar="false">
								<JobItem v-for="(item,index) in dataList" :key="index" :data="item"
									@jobItemClick="jobItemClick"></JobItem>
							</scroll-view>
							<!-- </z-paging> -->
						</block>
						<block v-if="dataList && dataList.length == 0 && dataList.length == 0">
							<view class="empty-img">
								<image src="http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/icon50.png"></image>
								<label>暂无内容</label>
							</view>
						</block>
					</view>
				</view>
				<w-picker :visible.sync="addressisShow" mode="region" :value="defaultRegion" default-type="value"
					:hide-area="false" @confirm="addressConfirm($event,'region')" @cancel="addressCancel"
					ref="region"></w-picker>
			</view>
		</z-paging>
		<u-popup :show="show" @close="close" @open="open">
			<view class="classifyBigBox">
				<view v-for="(item,index) in classifyList" :key="index" @click="choice(index)"
					:class="[item.selected?'selde':'noselde']">
					{{item.selected?item.name:item.name}}
				</view>
			</view>
			<view class="addres-footer dis-row">
				<view class="addres-btn" @click="onClear">清除</view>
				<view class="addres-btn" @click="onConfirmFiltrate">确定选择</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import store from '@/common/store.js'
	import pop from "@/components/ming-pop/ming-city.vue"
	import Index from "@/common/index-model.js"
	let index = new Index();
	export default {
		data() {
			return {
				defaultRegion: ["610000", "610100", "610112"],
				cityId: null,
				areaId: null,
				provinceId: null,
				address: '',
				addresspro:'',
				addressisShow: false, // 是否显示地点弹框

				direction: 'below',
				seachform: {
					keyWords: '',
					cityId: null,
					areaId: null,
					provinceId: null
				},
				dataList: [],
				title: '这是标题',
				content: '这是内容',
				type: 0,
				bannerList: [],
				accessId: -1,// 一级金刚区id
				secondKGId:-1,// 二级金刚区id
				//定义前端选中的值
				selectList: "",
				selectId: [],
				classifyList: [],
				selected: [], //选取的分类 ,用对象更方便存取数据
				show: false,
				// position:null
				needCity:true,
				keyWords:'',
			};
		},
		components: {
			pop
		},
		onLoad(option) {
			let dataStr = decodeURIComponent(option.data);
			// 将字符串转换回对象
			let dataObj = JSON.parse(dataStr);
			// if(dataObj.skillName != '建筑施工'&&dataObj.skillName != '矿业'){
			// 	this.addresspro = dataObj.province
			// 	this.address = dataObj.city
			// }
			console.log(dataObj,'传过来的city')
			let cityObj = JSON.parse(dataObj.configs)
			this.needCity = cityObj.searchConfigs.needCity
			console.log('传过来的值是', dataObj)
			// console.log('传过来的值是', dataObj,cityObj.searchConfigs.needCity)
			// uni.setStorage({
			// 	key: 'index',
			// 	data: dataObj.index,
			// 	success: () => {
			// 		console.log('存入成功')
			// 	}
			// })
			this.type = dataObj.index
			this.accessId = dataObj.id
			this.getTypeItem()
			this.getTypeLabs()
		    uni.$on('backInfo', this.onrecv);
		},
		onUnload() {
			uni.$off('backInfo', this.onrecv)
		},
		watch: {
			accessId() {
				this.$refs.paging.reload();
			},
			// secondKGId() {
			// 	this.$refs.paging.reload();
			// },
		},
		methods: {
			searchbtn(){
						this.$refs.paging.reload();
			},
			bgsearch(e){
				this.keyWords = e
		
			},
			choice(index) {
				//当再次被选中时，取消当前选中项
				if (this.classifyList[index].selected == true) {
					this.classifyList[index].selected = false;
					//取消选中时删除数组中的值
					for (var i = 0; i < this.selectId.length; i++) {
						if (this.selectId[i] === this.classifyList[index].id) {
							this.selectId.splice(i, 1);
						}
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
					console.log("选中的值selectList", this.selectList)
				} else {
					this.classifyList[index].selected = true;
					this.selectId.push(this.classifyList[index].id)
					for (var i = 0; i < this.selectId.length; i++) {
						console.log("选中的值", this.selectId[i])
					}
					this.selectList = this.selectId
					console.log("选中的值", this.selectId)
					console.log("选中的值selectList", this.selectList)
				}
			},
			//提交筛选
			onConfirmFiltrate() {
				this.show = false
				console.log(this.selectList, "选择结果数组-----");
				this.$refs.paging.reload();
			},
			onrecv(data) {
				// console.log('监听到事件来自 update ，携带参数 msg 为：' + data.cityName);
				this.address = data.cityName
				this.addresspro = data.provinceName
				console.log('--------1111--------城市切换',this.address)
				this.$refs.paging.reload();
			},
			gotoCity() {
				if(this.address){
					uni.navigateTo({
						url: "/pages/index/checkCity/checkCity?city=" + this.address
					})
				}else if(this.addresspro){
					uni.navigateTo({
						url: "/pages/index/checkCity/checkCity?city=" + this.addresspro
					})
				}else{
				uni.navigateTo({
					url: "/pages/index/checkCity/checkCity?city=" + '全国'
				})
			}
				// console.log('----------------城市切换')
				
			},
			//选取分类
			onSelectClassify(id) {
				this.$set(this.selected, id, !this.selected[id]) //动态更新视图数据
			},
			//重置
			onClear() {
				// this.selected = {}
				for (var i = 0; i < this.classifyList.length; i++) {
					if (this.classifyList[i].selected == true) {
						let item = this.classifyList[i]
						item.selected = false
						this.$set(this.classifyList, this.classifyList[i], item)
					}
					// this.classifyList[index].selected = false;
				}
				this.selected = []
				this.select = []
				console.log(this.classifyList, "选择结果数组----classifyList-");
				console.log(this.selectList, "选择结果数组----selectList-");
				console.log(this.selectId, "选择结果数组----selectId-");
			},
			open() {
			
			},
			close() {
				this.show = false
			},
			getTypeLabs() {
				console.log("筛选数据没有请求吗？？？？？？");
				index.getPublicMember({}, 'client/public/labellist', 'get', res => {
					// this.$refs.paging.complete(res.data.result.records);
					console.log("标签内容是", res.data.result);
					this.classifyList = res.data.result
				})
			},
			//-------------------------------------------------
			navSearch() {
				// index.navigate_to('../../pagesC/search/index')
				uni.navigateTo({
					url:"/pagesC/search/index"
				})
			},
			itemClick(item){
				// this.secondKGId = item.id
				this.accessId = item.id
			},
			getTypeItem() {
				index.getPublicMember({}, '/client/public/secondKG/' + this.accessId, 'get', res => {
					this.bannerList = res.data.result;
					console.log('金刚区返回的结果是', this.bannerList);
				})
			},
			jobItemClick(data) {
				console.log('你点到我了～～～小心点', data)
				uni.navigateTo({
					url: "/pagesB/jobinfo/jobLeavetwoInfo?cardID=" + data.data.id
				})
				uni.setStorage({
					key: 'cardID',
					data: data.data.id,
					success: () => {
						console.log('存入成功')
					}
				})
			},
			// 隐藏键盘
			hideKeyboard() {
				uni.hideKeyboard()
			},
			addressCancel() {
				this.addressisShow = false
				this.seachform.cityId = null
				this.seachform.areaId = null
				this.seachform.provinceId = null
				this.address = ''
				this.seachform.keyWords = ''
				this.$refs.paging.reload();
			},
			addressConfirm(e) {
				console.log('当前选择的地址是', e)
				// console.log('当前选择的地址是', e.obj.area.value)
				// console.log('当前选择的地址是', e.obj.area.label)
				this.addressisShow = false
				this.seachform.cityId = e.value[1]
				// this.seachform.areaId = e.value[2]
				this.seachform.provinceId = e.value[0]
				// this.address = e.obj.area.label city
				this.address = e.obj.city.label
				this.$refs.paging.reload();
			},
			sendSearch() {
				// this.$refs.paging.reload();
			},
			getList(pageNo, pageSize) {
				let ids = this.selectList.length > 0 ? this.selectList.join(',') : ''
				console.log('分页数据====', pageNo, pageSize,ids)
				let send={}
				if(this.needCity==true){
					send = {
							pageNum: pageNo,
							pageSize: pageSize,
							keyWords: this.seachform.keyWords,
							labelIds: ids,
							cityName: this.address,
							provinceName:this.addresspro,
							KGId:this.accessId,
							keyWords:this.keyWords,
							// secondKGId:this.secondKGId
						}
				}else{
					send = {
							pageNum: pageNo,
							pageSize: pageSize,
							keyWords: this.seachform.keyWords,
							labelIds: ids,
							KGId:this.accessId,
						}
				}
				
				index.getPublicMember(send, 'client/recuitjob/listNoSe', 'get', res => {
					this.$refs.paging.complete(res.data.result.records);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("index.css");
	@import url("@/static/css/publics.css");
	.addres-btn{width: 340rpx;height: 80rpx;line-height: 80rpx;text-align: center;font-size: 28rpx;border-radius: 6rpx;}
	.addres-btn:first-child{margin-right: 30rpx;background-color: #E4F0FF;color:#0575FF;margin-left: 20rpx;}
	.addres-btn:last-child{background-color: #0575FF;color: #ffffff;}
	.dis-row{display: flex;flex-direction: row;}
	.addres-footer{width: 100%;padding: 20rpx 0rpx;background-color: #ffffff;}
/* 已选择 */
	.selde {
		border: 1px solid #0575ff;
		background: #0575ff;
		color: #FFFFFF;
		border-radius: 8px;
		font-size: 14px;
		// padding: 0 10upx;
		justify-content: center;
		display: flex;
		align-items: center;
		padding: 10px;
		text-align: center;
	}

	/* 未选择 */
	.noselde {
		display: flex;
		align-items: center;
		border: 1px solid #959595;
		background: #FFFFFF;
		color: #959595;
		border-radius: 8px;
		font-size: 14px;
		padding: 10px;
		text-align: center;
		justify-content: center;
	}

	.valueList {
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
		justify-content: center;
	}

	.tl-flex-center1 {
		display: flex;
		height: 60px;
		flex-direction: row;
		justify-content: space-between;
		// padding: 30px;
		background-color: #F3F3F3;
		text-align: center;
		align-items: center;
		padding-left: 30px;
		padding-right: 30px;
		opacity: 0.5;
	}
	.classifyBigBox {
		// margin: 47rpx 0;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 50rpx;
		padding: 10px;
	}
	
	.tl-btn-120 {
		width: 180rpx;
		// padding: 17rpx;
		background: #F3F3F3;
		color: #999;
		border-radius: 13rpx;
		// border: 2rpx solid #dedede;
		text-align: center;
		height: 35px;
	}
	
	.onConfirmFiltrate {
		width: 180rpx;
		// padding: 17rpx;
		height: 25px;
		background: #2851F3;
		color: #FFFFFF;
		border-radius: 13rpx;
		text-align: center;
		margin-left: 35rpx;
	}
	
	::v-deep {
		.u-navbar--fixed {
			// background: #fff;
			background-size: 100%;
			background-image: url('http://xgr.oss-cn-hangzhou.aliyuncs.com/icon/images/bg1.png');
			background-repeat: no-repeat;

			// background-image: linear-gradient(to bottom, #42cdff, #0288ff);
			&>view {
				background: transparent !important;
			}

			.leftText {
				color: #000;
			}
		}
	}

	.active {
		background: #0575ff;
		color: #fff;

		.userName {
			.userNameS {
				view:nth-child(1) {
					color: #fff !important;
				}

				view:nth-child(3) {
					color: #fff !important;
				}
			}

			.userNameC {
				color: #fff !important;
			}
		}

		view:nth-child(3) {
			color: #fff !important;
		}
	}

	.topmenu {
		background: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding: 18rpx 0rpx;

		.menus {
			width: 25%;
			text-align: center;
			margin-bottom: 24rpx;
			color: #A1A1A1;

			view {
				width: 64rpx;
				height: 64rpx;
				text-align: center;
				margin: 0 auto;

				image {
					width: 100%;
					height: 100%;
				}
			}

			&.active {
				font-weight: bold;
				color: #0f0f0f;
			}
		}
	}

	.content {
		background: #fff !important;
		height: 100vh;
	}

	.center {
		padding: 0rpx 20rpx 0rpx 20rpx;
		background: #fff;

		.searchTop {
			display: flex;
			padding: 20rpx;
			align-items: center;

			.addr {
				color: #424242;
				display: flex;
				margin-right: 16rpx;

				text {
					margin-right: 4rpx;
				}
			}

			.search {
				flex: 1;
				display: flex;
				background: rgba($color: #E4F0FF, $alpha: 0.3);
				height: 60rpx;
				padding: 0 10rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;

				::v-deep {
					.u-input {
						margin: 0 10rpx;
					}
				}
			}

			.right {
				color: #0F0F0F;
			}
		}
	}
</style>